<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>WingPick Pro - 服务与保修</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1976D2',
                        'primary-variant': '#0D47A1',
                        secondary: '#FF6F00',
                        'secondary-variant': '#E65100',
                        background: '#F5F5F5',
                        surface: '#FFFFFF',
                        'on-surface': '#212121',
                        'on-surface-variant': '#757575',
                        border: '#E0E0E0',
                        success: '#4CAF50',
                        warning: '#FFC107',
                        error: '#F44336',
                        info: '#2196F3'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .android-card {
                @apply bg-surface rounded-2xl shadow-sm p-4;
            }
            .android-button {
                @apply bg-primary text-white py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .android-button-secondary {
                @apply bg-white text-primary border border-primary py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .section-title {
                @apply text-xl font-semibold text-on-surface mb-3;
            }
            .radio-input {
                @apply w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center cursor-pointer transition-all;
            }
            .radio-input-checked {
                @apply bg-primary;
            }
            .radio-input-checked::after {
                content: '';
                @apply w-2.5 h-2.5 rounded-full bg-white;
            }
            .checkbox-input {
                @apply w-5 h-5 rounded border-2 border-primary flex items-center justify-center cursor-pointer transition-all;
            }
            .checkbox-input-checked {
                @apply bg-primary;
            }
            .checkbox-input-checked::after {
                content: '✓';
                @apply text-white text-xs font-bold;
            }
            .step-indicator {
                @apply h-1 rounded-full flex-1 transition-all duration-300;
            }
            .step-indicator-active {
                @apply bg-primary;
            }
            .step-indicator-inactive {
                @apply bg-border;
            }
            .step-indicator-completed {
                @apply bg-primary;
            }
            .feature-icon {
                @apply w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary;
            }
            .service-card {
                @apply border-2 border-transparent hover:border-primary/30 transition-all cursor-pointer;
            }
            .service-card-selected {
                @apply border-primary bg-primary/5;
            }
        }
    </style>
</head>
<body class="bg-background font-roboto text-on-surface min-h-screen">
    <!-- Android 状态栏 -->
    <div class="bg-primary h-7 w-full flex items-center justify-between px-4">
        <div class="text-white text-xs">18:30</div>
        <div class="flex items-center space-x-1">
            <i class="fa fa-signal text-white text-xs"></i>
            <i class="fa fa-wifi text-white text-xs"></i>
            <i class="fa fa-battery-three-quarters text-white text-xs"></i>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="flex items-center h-14 px-4">
            <button id="backButton" class="mr-4">
                <i class="fa fa-arrow-left text-lg"></i>
            </button>
            <div class="text-lg font-semibold flex-1 text-center mr-4">配置报价</div>
        </div>
    </header>

    <!-- 步骤指示器 -->
    <div class="px-4 pt-4 pb-2">
        <div class="flex items-center justify-between mb-1">
            <span class="text-xs font-medium text-primary">4/4</span>
            <span class="text-xs font-medium text-on-surface-variant">服务与保修</span>
        </div>
        <div class="flex items-center space-x-2">
            <div class="step-indicator step-indicator-completed"></div>
            <div class="step-indicator step-indicator-completed"></div>
            <div class="step-indicator step-indicator-completed"></div>
            <div class="step-indicator step-indicator-active"></div>
        </div>
    </div>

    <!-- 产品信息 -->
    <div class="px-4 pb-4">
        <div class="android-card">
            <div class="flex items-center">
                <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
                    <img src="../../WingPick Pro/static/AC311A.png" alt="AC311A直升机" class="w-full h-full object-cover">
                </div>
                <div class="ml-3 flex-1">
                    <h2 class="font-semibold">AC311A</h2>
                    <p class="text-on-surface-variant text-sm">轻型多用途直升机</p>
                    <p class="text-primary font-medium">¥12,500,000</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <main class="p-4 space-y-4 pb-24">
        <h1 class="text-xl font-bold mb-4">服务与保修</h1>
        
        <!-- 保修方案 -->
        <div class="android-card">
            <h2 class="text-lg font-semibold mb-3">选择保修方案</h2>
            
            <!-- 标准保修 -->
            <div class="android-card service-card service-card-selected mb-3" data-price="0">
                <div class="flex items-start">
                    <div class="radio-input radio-input-checked mt-1 mr-3 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <h3 class="font-semibold">标准保修</h3>
                            <p class="font-medium text-primary">¥0</p>
                        </div>
                        <p class="text-on-surface-variant text-sm mb-2">2年或1000飞行小时，以先到者为准</p>
                        <div class="flex space-x-3 text-xs">
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>发动机基础保修</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>航电系统保修</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 扩展保修 -->
            <div class="android-card service-card mb-3" data-price="850000">
                <div class="flex items-start">
                    <div class="radio-input mt-1 mr-3 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <h3 class="font-semibold">扩展保修</h3>
                            <p class="font-medium text-primary">+¥850,000</p>
                        </div>
                        <p class="text-on-surface-variant text-sm mb-2">5年或2000飞行小时，以先到者为准</p>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>发动机全面保修</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>航电系统保修</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>结构件额外保护</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>年度检查包含</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 全面服务包 -->
            <div class="android-card service-card" data-price="1500000">
                <div class="flex items-start">
                    <div class="radio-input mt-1 mr-3 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <h3 class="font-semibold">全面服务包</h3>
                            <p class="font-medium text-primary">+¥1,500,000</p>
                        </div>
                        <p class="text-on-surface-variant text-sm mb-2">7年或3000飞行小时，含全部维护服务</p>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>无限发动机保修</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>全部系统保修</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>所有定期维护包含</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>优先技术支持</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 额外服务 -->
        <div class="android-card">
            <h2 class="text-lg font-semibold mb-3">额外服务选项</h2>
            
            <div class="space-y-3">
                <div class="flex items-center">
                    <div class="checkbox-input mr-3"></div>
                    <div class="flex-1">
                        <span class="font-medium">飞行员培训课程</span>
                        <span class="text-xs text-primary ml-2">+¥280,000</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="checkbox-input mr-3"></div>
                    <div class="flex-1">
                        <span class="font-medium">地面维护设备</span>
                        <span class="text-xs text-primary ml-2">+¥150,000</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="checkbox-input mr-3"></div>
                    <div class="flex-1">
                        <span class="font-medium">技术支持与咨询（24/7）</span>
                        <span class="text-xs text-primary ml-2">+¥120,000/年</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="checkbox-input mr-3"></div>
                    <div class="flex-1">
                        <span class="font-medium">备件管理服务</span>
                        <span class="text-xs text-primary ml-2">+¥90,000/年</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="checkbox-input mr-3"></div>
                    <div class="flex-1">
                        <span class="font-medium">直升机运输服务</span>
                        <span class="text-xs text-primary ml-2">+¥350,000</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务亮点 -->
        <div class="android-card">
            <h2 class="text-lg font-semibold mb-3">服务亮点</h2>
            
            <div class="grid grid-cols-2 gap-3">
                <div class="flex items-start">
                    <div class="feature-icon mr-2">
                        <i class="fa fa-clock-o"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-medium">全球快速响应</h3>
                        <p class="text-xs text-on-surface-variant">24/7技术支持</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="feature-icon mr-2">
                        <i class="fa fa-wrench"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-medium">专业维护团队</h3>
                        <p class="text-xs text-on-surface-variant">认证工程师</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="feature-icon mr-2">
                        <i class="fa fa-globe"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-medium">全球服务网络</h3>
                        <p class="text-xs text-on-surface-variant">覆盖50+国家</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="feature-icon mr-2">
                        <i class="fa fa-leaf"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-medium">环保合规</h3>
                        <p class="text-xs text-on-surface-variant">绿色维修实践</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部操作按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-surface p-4 border-t border-border">
            <div class="flex justify-between items-center mb-3">
                <span class="text-sm text-on-surface-variant">服务总价:</span>
                <span id="currentPrice" class="text-xl font-semibold text-primary">¥0</span>
            </div>
            <div class="flex space-x-3">
                <button id="prevButton" class="android-button-secondary flex-1">
                    上一步
                </button>
                <button id="nextButton" class="android-button flex-1">
                    生成报价单
                </button>
            </div>
        </div>
    </main>

    <script>
        // 返回按钮点击事件
        document.getElementById('backButton').addEventListener('click', function() {
            window.location.href = 'config-equipment.html';
        });

        // 上一步按钮点击事件
        document.getElementById('prevButton').addEventListener('click', function() {
            window.location.href = 'config-equipment.html';
        });

        // 生成报价单按钮点击事件
        document.getElementById('nextButton').addEventListener('click', function() {
            // 跳转到报价单预览页面
            window.location.href = 'quote-preview.html';
        });

        // 保修方案选择
        const serviceCards = document.querySelectorAll('.service-card');
        const radioInputs = document.querySelectorAll('.radio-input');
        
        serviceCards.forEach((card, index) => {
            card.addEventListener('click', function() {
                // 移除所有选中状态
                serviceCards.forEach(c => c.classList.remove('service-card-selected'));
                radioInputs.forEach(r => r.classList.remove('radio-input-checked'));
                
                // 设置当前选项为选中状态
                this.classList.add('service-card-selected');
                radioInputs[index].classList.add('radio-input-checked');
                
                // 更新价格
                updateTotalPrice();
            });
        });

        // 复选框功能选择
        const checkboxInputs = document.querySelectorAll('.checkbox-input');
        checkboxInputs.forEach(checkbox => {
            checkbox.addEventListener('click', function() {
                // 切换选中状态
                this.classList.toggle('checkbox-input-checked');
                
                // 更新价格
                updateTotalPrice();
            });
        });

        // 价格计算函数
        function updateTotalPrice() {
            let totalPrice = 0;
            
            // 计算选中的保修方案价格
            serviceCards.forEach(card => {
                if (card.classList.contains('service-card-selected')) {
                    const price = parseInt(card.getAttribute('data-price'));
                    totalPrice += price;
                }
            });
            
            // 计算选中的额外服务价格
            checkboxInputs.forEach((checkbox, index) => {
                if (checkbox.classList.contains('checkbox-input-checked')) {
                    // 根据位置判断价格
                    if (index === 0) totalPrice += 280000; // 飞行员培训
                    else if (index === 1) totalPrice += 150000; // 地面维护设备
                    else if (index === 2) totalPrice += 120000; // 技术支持
                    else if (index === 3) totalPrice += 90000; // 备件管理
                    else if (index === 4) totalPrice += 350000; // 运输服务
                }
            });
            
            // 更新价格显示
            const formattedPrice = new Intl.NumberFormat('zh-CN').format(totalPrice);
            document.getElementById('currentPrice').textContent = `¥${formattedPrice}`;
        }

        // 初始化时计算价格
        updateTotalPrice();
    </script>
</body>
</html>